<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <link rel="stylesheet" th:href="@{/semantic/semantic.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <style>

    </style>
</head>

<body style="background-color: #FAFAFA">

<div class="layui-container" style="width: auto">

    <div class="layui-row">

        <div class="layui-col-md10 layui-col-md-offset1">
            <!--        导航栏-->
            <div th:insert="component/user-header.html::header('用户信息')"></div>

            <!--            内容-->
            <div id="userId" th:value="${user.id}" class="layui-row layui-col-space10" style="margin-top: 60px;font-size: 16px;">
                <div>
                    <span>头像：</span>
                    <img style="width: 150px; height: 150px"
                         th:src="${#request.getAttribute('user').img == null? '/images/default.jpg' : #request.getAttribute('user').img}">
<!--                    <button th:if="${session.user != null && #request.getAttribute('user') != null && #request.getAttribute('user').id == session.user.id}"-->
<!--                            type="button" class="layui-btn" id="avatarUpload" style="margin-left: 70px">-->
<!--                        <i class="layui-icon">&#xe67c;</i>上传头像-->
<!--                    </button>-->
                </div>
                <div style="margin-top: 30px">
                    <span>用户名：</span>
                    <span th:text="${#request.getAttribute('user').username}"></span>
                </div>
                <div style="margin-top: 30px">
                    <span>性别：</span>
                    <span th:text="${#request.getAttribute('user').sex}"></span>
                </div>
                <div style="margin-top: 30px">
                    <span>电子邮箱：</span>
                    <span th:text="${#request.getAttribute('user').email}"></span>
                </div>
                <div style="margin-top: 30px">
                    <span>创建时间：</span>
                    <span th:text="${#request.getAttribute('user').time}"></span>
                </div>
                <button th:if="${session.user != null && #request.getAttribute('user') != null && #request.getAttribute('user').id == session.user.id}"
                        id="logout" type="button" class="layui-btn layui-btn-danger" style="margin-top: 50px">
                    <i class="layui-icon">&#xe640;</i>注销该账号
                </button>
            </div>
        </div>

    </div>

</div>

<div th:insert="index.html::pageTail"></div>

</body>

<script th:src="@{/js/jquery.min.js}" crossorigin="anonymous"></script>
<script th:src="@{/semantic/semantic.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/js/axios.js}"></script>
<script th:src="@{/js/my.js}"></script>
<script type="application/javascript">
    layui.use('upload', function () {
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#avatarUpload' //绑定元素
            , url: '/image/upload' //上传接口
            , field: 'avatar'
            , done: function (res) {
                if (res.success == 1) {
                    layer.open({
                        title: '提示'
                        , content: '上传成功！刷新即可查看'
                    });
                }
                //上传完毕回调
            }
            , error: function () {
                //请求异常回调
            }
        });
    });

    $("#logout").click(function () {
        layer.open({
            title: '警告'
            , content: '您确定要注销这个账号吗？'
            , yes: function (index, layero) {
                var userId = document.getElementById('userId').getAttribute('value')
                var requestData = {
                    id: userId
                }
                console.log(requestData)
                axios.post('/user/delete', requestData).then(res => {
                    if (res.data == '1') {
                        location.href = '/'
                    }

                })
            }
        });
    });
</script>

</html>